<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<link rel="shortcut icon" href="images/content/favicon.ico" />
<meta http-equiv="Content-Script-Type" content="text/javascript" /> 

<meta name="robots" content="index, follow" />
<meta name="keywords" content="" />
<meta name="title" content="" />
<meta name="description" content="" />
<title>Union Corp</title>
<link rel="shortcut icon" href="./images/favicon.ico" />
<!-- ////////////////////////////////// -->
<!-- //      Start Stylesheets       // -->
<!-- ////////////////////////////////// -->
<link href="./styles/style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="./styles/color.css" rel="stylesheet" type="text/css" media="screen" />
<link href="./styles/nivo-slider.css" rel="stylesheet" type="text/css" media="screen" />
<!-- ////////////////////////////////// -->
<!-- //      Javascript Files        // -->
<!-- ////////////////////////////////// -->
<script type="text/javascript" src="./js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="./js/hoverIntent.js"></script> 
<script type="text/javascript" src="./js/superfish.js"></script> 
<script type="text/javascript" src="./js/supersubs.js"></script> 
<script type="text/javascript" src="./js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="./js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
	//Menu
	jQuery("ul.sf-menu").supersubs({ 
	minWidth		: 12,		// requires em unit.
	maxWidth		: 27,		// requires em unit.
	extraWidth		: 1	// extra width can ensure lines don't sometimes turn over due to slight browser differences in how they round-off values
						   // due to slight rounding differences and font-family 
	}).superfish();  // call supersubs first, then superfish, so that subs are 
					 // not display:none when measuring. Call before initialising 
					 // containing tabs for same reason. 
});
//Slider
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider({
	effect: 'fold',
	slices:15,
	animSpeed:500, //Slide transition speed
	pauseTime:5000,
	controlNav: false,
	directionNavHide: false,
	prevText: 'prev',
	nextText: 'next',
	startSlide:0, //Set starting Slide (0 index)
	directionNav:true, //Next &amp; Prev
	afterLoad: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		},
		beforeChange: function(){
		jQuery(".nivo-caption").animate({top:"-300"}, {easing:"easeInBack", duration: 500})
		},
		afterChange: function(){
		jQuery(".nivo-caption").animate({top:"60"}, {easing:"easeOutBack", duration: 500})
		}
	});
	
});

</script>

<meta charset="UTF-8"></head>
<body>

<div id="wrapper">
    <div id="wrapper-top">
    	<div class="container">
        	<div class="twelve columns">
                <div id="top">
                    <div id="topsearch">
                     <form method="post" action="#">
                        <div><input type="text" class="inputbox" value="Type Search..." onblur="if (this.value == ''){this.value = 'Type Search...'; }" onfocus="if (this.value == 'Type Search...') {this.value = ''; }" /></div>
                    </form>
                    </div>
                    <div id="logo"><a href="./index.html"><img src="./images/logo.png" alt="" /></a></div>
                </div>
                <div id="nav">
                    <ul id="topnav" class="sf-menu">
                        <li><a href="./index.html"  class="current">Home</a></li>
                        <li><a href="./about.html">About Us</a>
                        	<ul>
                                <li><a href="./about.html">About Page</a></li>
                                <li><a href="./typography.html">Typography</a></li>
                                <li><a href="./single.html">Blog Detail</a></li>
                                <li><a href="#">Dropdown</a>
                                	<ul>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                        <li><a href="#">Example Dropdown Menu</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="./services.html">Services</a></li>
                        <li><a href="./portfolio.html">Portfolio</a></li>
                        <li><a href="./blog.html">Blog</a></li>
                        <li><a href="./contact.html">Contacts</a></li>
                    </ul><!-- #topnav -->
                </div><!-- #nav -->	
            </div>
        </div><!-- .container -->
    </div><!-- end #wrapper-top -->	
    <div id="wrapper-content">
    	<div class="container">
        	<div class="twelve columns">
                <div id="header">
                    <div id="slider-container">
                        <div id="slider" class="nivoSlider">
                            <img src="./images/slider1.jpg" alt="" title="#htmlcaption1"/>
                            <img src="./images/slider2.jpg" alt="" title="#htmlcaption2"/>
                            <img src="./images/slider3.jpg" alt="" title="#htmlcaption3"/>
                            <img src="./images/slider4.jpg" alt="" title="#htmlcaption4"/>
                        </div><!-- #slider -->
                        <div id="htmlcaption1" class="nivo-html-caption">
                        	<span class="sdate">December 01, 2011</span>
                            <h1>Let&acute;s create your company growth faster...</h1>
                            <hr/>
                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
                        </div>
                        <div id="htmlcaption2" class="nivo-html-caption">
                        	<span class="sdate">December 05, 2011</span>
                            <h1>We can help to solve your company problem...</h1>
                            <hr/>
                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
                        </div>
                        <div id="htmlcaption3" class="nivo-html-caption">
                        	<span class="sdate">December 07, 2011</span>
                            <h1>We always smile to help you...</h1>
                            <hr/>
                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
                        </div>
                        <div id="htmlcaption4" class="nivo-html-caption">
                        	<span class="sdate">December 07, 2011</span>
                            <h1>Discover the places you&acute;ve never been before...</h1>
                            <hr/>
                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In sapien lorem, placerat ac imperdiet a, volutpat et risus. </p>
                        </div>
                    </div><!-- #slider-container -->
                </div><!-- #header -->
                <div id="content">
                
                    <div class="one_half firstcols">
                        <img src="./images/icons/icon1.png" alt="" class="alignleft" />
                        <h1 class="nomargin">Internet Marketing</h1>
                        <p class="indentleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus pretium porttitor. Vestibulum ante ipsum primis in faucibus.</p>
                    </div>
                    <div class="one_half lastcols">
                        <img src="./images/icons/icon2.png" alt="" class="alignleft" />
                        <h1 class="nomargin">Premium Themes</h1>
                        <p class="indentleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus pretium porttitor. Vestibulum ante ipsum primis in faucibus.</p>
                    </div>
                    <div class="separator line"></div>
                    <div class="one_half firstcols">
                        <img src="./images/icons/icon3.png" alt="" class="alignleft" />
                        <h1 class="nomargin">Brand Identity</h1>
                        <p class="indentleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus pretium porttitor. Vestibulum ante ipsum primis in faucibus.</p>
                    </div>
                    <div class="one_half lastcols">
                        <img src="./images/icons/icon4.png" alt="" class="alignleft" />
                        <h1 class="nomargin">Good Ideas</h1>
                        <p class="indentleft">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus pretium porttitor. Vestibulum ante ipsum primis in faucibus.</p>
                    </div>
                    
                    <div class="separator line"></div>
                    
                    <div class="one_third firstcols">
                        <h2>Welcome Guest!</h2>
                        <p>Sed scelerisque aliquet orci quis dictum. Vivamus malesuada suscipit sapien sit amet egestas. Phasellus sit amet lectus non enim laoreet volutpat. </p>
                        <p class="colortext">Pellentesque eget risus ac nunc dignissim venenatis. Etiam commodo interdum consequat. </p>
                        <p>Pellentesque rutrum risus sed neque vestibulum non consectetur erat suscipit. Quisque facilisis pellentesque venenatis. Fusce mollis rhoncus sapien. </p>
                        <p>Maecenas consequat libero mattis nisl fringilla pretium. Aenean faucibus, erat bibendum volutpat hendrerit, lectus metus gravida sapien, vel malesuada lorem erat a ipsum. Sed porta fermentum pellentesque.</p>
                    </div>
                    <div class="one_third">
                        <h2>Features</h2>
                        <p>
                        <img src="./images/content/pic1.jpg" alt="" class="border" />
                        </p>
                        <p>Praesent cursus, quam et dapibus pharetra, lacus lorem interdum magna, ac condimentum tellus ligula id erat. Etiam vehicula aliquet venenatis.</p>
                        <p>Nam at nulla nibh, sit amet dapibus tortor. Nulla elementum tempor mattis. Nam purus diam, blandit sed cursus ut, tempor vitae urna.</p>
                        <a href="#" class="button">Read More</a>
                    </div>
                    <div class="one_third lastcols">
                        <h2>Latest News</h2>
                        <ul id="latestpost">
                            <li>
                                <img src="./images/content/lp1.jpg" alt="" class="alignleft border"  />
                                <h5><a href="#">Photography Design</a></h5>
                                <p>Phasellus sit amet lectus non enim laoreet volutpat, lacus sodales lobortis.</p>
                            </li>
                            <li>
                                <img src="./images/content/lp2.jpg" alt="" class="alignleft border"  />
                                <h5><a href="#">Business Services</a></h5>
                                <p>Phasellus sit amet lectus non enim laoreet volutpat, lacus sodales lobortis.</p>
                            </li>
                            <li>
                                <img src="./images/content/lp3.jpg" alt="" class="alignleft border"  />
                                <h5><a href="#">Development Themes</a></h5>
                                <p>Phasellus sit amet lectus non enim laoreet volutpat, lacus sodales lobortis.</p>
                            </li>
                        </ul>
                    </div>
                	<div class="clear"></div>
                </div><!-- #content -->	
            </div>
        </div>
    </div><!-- end #wrapper-content -->
    <div id="wrapper-footer">
    	<div class="container">
        	<div class="twelve columns">
                <div id="footer_text">
                	Copyright &copy;2011 Union Corp.  All Rights Reserveddd
                </div>
            </div>
        </div>
    </div><!-- end #wrapper-footer -->	
</div><!-- end #wrapper -->	

</body>
</html>
